<template>
  <ul class="menu-container">
    <li v-for="n in info" :key="n.name">
      <router-link :exact="n.exact" :to="{name:n.name}" >
        <div class="icon">
          <Icon :type="n.icon" />
        </div>
        <span>{{ n.title }}</span>
      </router-link>
    </li>
  </ul>
</template>

<script>
import Icon from "../../Icon/index.vue";
export default {
  components: {
    Icon,
  },
  data() {
    return {
      info: [
        {
          name: "Home",
          title: "首页",
          icon: "home",
          exact: true,
        },
        {
          name: "Blog",
          title: "文章",
          icon: "blog",
          exact: false,
        },
        {
          name: "About",
          title: "关于我",
          icon: "about",
          exact: true,
        },
        {
          name: "Project",
          title: "项目&效果",
          icon: "code",
          exact: true,
        },
        {
          name: "Message",
          title: "留言板",
          icon: "chat",
          exact: true,
        },
      ],
    };
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.menu-container {
  color: @gray;
  list-style: none;
  margin: 0;
  padding: 0;
  a {
    padding: 0 50px;
    display: block;
    display: flex;
    align-items: center;
    height: 45px;
    &.router-link-active {
      background-color: #2d2d2d;
    }
    &:hover {
      color: #fff;
    }
    .icon {
      width: 25px;
    }
  }
}
</style>